<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/css/main.css"/>
  <script src="/layui/layui.js"></script>
  <script src="/js/jquery.1.8.3.min.js"></script>
  <link type="text/css" rel="styleSheet"  href="/css/customer_send.css" />
</head>
<body>

<div th:include="/common/head :: head"></div>

<div  class="content">

  <div class="eStep-warp" id="step1">
  
    

<ul style="margin-top: 50px;" class="eStep">
  <li class="eStep-item"></li>
  <li class="eStep-item"></li>
  <li class="eStep-item"></li>
  <li class="eStep-item"></li>
  <li class="eStep-item"></li>
</ul>
<div class="eStep-progress"id="progress-id" style="width: 0px;"></div>
<div class="eStep--point-warp">
  <span class="eStep--point-item" style="left: 0px; width: 120px;">
    <i class="eStep--point done point-1">┅</i>
    <i class="eStep--text">寄件人信息</i>
  </span><span class="eStep--point-item" style="left: 150px; width: 120px;">
    <i class="eStep--point point-2">✔</i>
    <i class="eStep--text">收件人信息</i>
  </span>
  <span class="eStep--point-item " style="left: 300px; width: 120px;">
    <i class="eStep--point point-3"></i>
    <i class="eStep--text">订单确认</i>
  </span>
  <span class="eStep--point-item" style="left: 450px; width: 120px;">
    <i class="eStep--point point-4"></i>
    <i class="eStep--text">预约信息</i>
  </span>
  <span class="eStep--point-item" style="left: 600px; width: 120px;">
    <i class="eStep--point point-5">✔</i>
    <i class="eStep--text">完成下单</i>
  </span>
</div>
</div>

  <div class="layui-tab layui-tab-card">
        <ul style="height: 0px;" id="my-ui" class="layui-tab-title">
          <li class=""></li>
          <li style="background-color: green; color: #ffff;" ></li>
          <li style="background-color: green; color: #ffff;"></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="layui-tab-content" style="padding-bottom: 50px; background-color: #fff;">
          <div id="div-show-1" class="layui-tab-item layui-show">

            <div style="font-weight: bolder;">寄件人信息：</div>
            <hr>
            <form style="padding-top: 10px;padding-right: 50px;" class="layui-form" action="">
              
              
              <div class="layui-form-item">
                <label class="layui-form-label">寄件人姓名<span class="red">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="f_name_input" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">手机<span class="red">*</span></label>
                <div class="layui-input-inline">
                  <input type="number" id="f_phone_input" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
                
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">省市区<span class="red">*</span></label>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="">
                    <option value="">请选择一个省份</option>
                    <option selected value="010">广东</option>
                  </select> 
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="">
                    <option value="">请选择一个城市</option>
                    <option selected value="010">广州</option>
                  </select> 
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="">
                    <option value="">请选择一个区</option>
                    <option selected value="010">从化</option>
                  </select> 
                </div>
              </div>

              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">详细地址<span class="red">*</span></label>
                <div class="layui-input-block">
                  <textarea name="desc" id="f_address_text" placeholder="请输入街道、门牌号等详细地址信息，如：太平镇广从南路548号" class="layui-textarea"></textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">标记</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="like[write]" title="家">
                  <input type="checkbox" name="like[read]" title="学校">
                  <input type="checkbox" name="like[dai]" title="公司">
                </div>
              </div>
              
              <div class="layui-form-item">
                <label class="layui-form-label">保存地址</label>
                <div class="layui-input-block">
                  <input type="radio" name="save_f" value="是" title="是" checked>
                  <input type="radio" name="save_f" value="否" title="否" >
                </div>
              </div>
              
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="button"  class="layui-btn layui-btn-normal next-1">下一步</button>
                </div>
              </div>
            </form>
             
            
          </div>


          <div id="div-show-2" class="layui-tab-item  ">


            <div style="font-weight: bolder;">收件人信息：</div>
            <hr>
            <form style="padding-top: 10px;padding-right: 50px;" class="layui-form" action="">
              
              
              <div class="layui-form-item">
                <label class="layui-form-label">收件人姓名<span class="red">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="t_name_input" name="name" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label" >手机<span class="red">*</span></label>
                <div class="layui-input-inline">
                  <input type="number" id="t_phone_input" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
                
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">省市区<span class="red">*</span></label>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="">
                    <option value="">请选择一个省份</option>
                    <option selected value="010">广东</option>
                  </select> 
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="">
                    <option value="">请选择一个城市</option>
                    <option selected value="010">广州</option>
                  </select> 
                </div>
                <div class="layui-input-inline">
                  <select name="city" lay-verify="">
                    <option value="">请选择一个区</option>
                    <option selected value="010">从化</option>
                  </select> 
                </div>
              </div>

              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">详细地址<span class="red">*</span></label>
                <div class="layui-input-block">
                  <textarea name="desc" id="t_address_text" placeholder="请输入街道、门牌号等详细地址信息，如：太平镇广从南路548号" class="layui-textarea"></textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">标记</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="like[write]" title="家">
                  <input type="checkbox" name="like[read]" title="学校">
                  <input type="checkbox" name="like[dai]" title="公司">
                </div>
              </div>
              
              <div class="layui-form-item">
                <label class="layui-form-label">保存地址</label>
                <div class="layui-input-block">
                  <input type="radio" name="save_t" value="是" title="是" checked>
                  <input type="radio" name="save_t" value="否" title="否" >
                </div>
              </div>
              
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="button" class="layui-btn layui-btn-primary back-2">上一步</button>
                  <button type="button"  class="layui-btn layui-btn-normal next-2">下一步</button>
                </div>
              </div>
            </form>

          </div>
          <div id="div-show-3"  class="layui-tab-item">

            <div style="font-weight: bolder;">订单信息：</div>
            <hr>
            <form style="padding-top: 30px;padding-right: 50px;" class="layui-form" action="">
              
              <div style="padding-left: 50px;padding-bottom: 50px;">
                <div>
                  <span style="background-color:#313030;color:#fff;border-radius: 50px;font-size: 20px;">&nbsp;&nbsp;寄&nbsp;&nbsp;</span>
                  <br>
                  <p style="padding-left: 50px;" id="f_name">黄才龙 </p>
                  <br>
                  <p style="padding-left: 50px;" id="f_phone">13435265568 </p>
                  <br>
                  <p style="padding-left: 50px;" id="f_address">广东省广州市从化区太平镇广从南路548号广州大学华软软件学院</p>
                </div>
                <div>
                  <span style="background-color:#b40c0c;color:#fff;border-radius: 50px;font-size: 20px;margin-top: 20px;">&nbsp;&nbsp;收&nbsp;&nbsp;</span>
                  <br>
                  <p style="padding-left: 50px;" id="t_name" >龙才黄</p>
                  <br>
                  <p style="padding-left: 50px;" id="t_phone">13435265568 </p>
                  <br>
                  <p style="padding-left: 50px;" id="t_address">广东省广州市从化区太平镇广从南路548号广州大学华软软件学院</p>
                </div>
              </div>
              
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="button" class="layui-btn layui-btn-primary back-3">上一步</button>
                  <button type="button"  class="layui-btn layui-btn-normal next-3">下一步</button>
                  
                </div>
              </div>
            </form>

          </div>
          <div id="div-show-4" class="layui-tab-item">

            <div style="font-weight: bolder;">预约信息：</div>
            <hr>
            <form style="padding-top: 30px;padding-right: 50px;" class="layui-form" action="">

              <div class="layui-form-item">
                <label class="layui-form-label">预约</label>
                <div class="layui-input-block">
                  <input type="radio" name="type" value="快递员上门取件" title="快递员上门取件" checked>
<!--                  <input type="radio" name="type" value="自行联系快递员或自寄" title="自行联系快递员或自寄" >-->
                </div>
              </div>

              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">捎话</label>
                <div class="layui-input-block">
                  <textarea name="desc" id="word" placeholder="捎话给快递员" class="layui-textarea"></textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="button" class="layui-btn layui-btn-primary back-4">上一步</button>
                  <button type="button"  class="layui-btn layui-btn-danger next-4">提交订单</button>
        
                </div>
              </div>
            </form>

          </div>
          <div id="div-show-5" class="layui-tab-item " >

            <div style="font-weight: bolder;">完成下单：</div>
            <hr>
              <!--小哥信息与简单包裹卡片b-->
              <div style="padding: 20px; background-color: #F2F2F2;">
                  <div class="layui-row layui-col-space15">
                      <div class="layui-col-md6">
                          <div class="layui-card">
                              <div class="layui-card-header">我的名字：<a>李佳涛</a><img src="/images/寄.jpg" style="float: right"></div>
                              <div class="layui-card-body">
                                  我的地址：<a>广东省广州市从化区华软</a><br>
                                  我的电话：<a>13544370963</a>
                              </div>
                          </div>
                      </div>
                      <div class="layui-col-md6">
                          <div class="layui-card">
                              <div class="layui-card-header">ta的名字：<a>黄才龙</a><img src="/images/收.jpg" style="float: right"></div>
                              <div class="layui-card-body">
                                  ta的地址：<a>广东省湛江市白云区广软</a><br>
                                  ta的电话：<a>13544370954</a>
                              </div>
                          </div>
                      </div>
                      <div class="layui-col-md12">
                          <div class="layui-card">
                              <div class="layui-card-header">快递小哥</div>
                              <div class="layui-card-body">
                                  <div class="info_img" style="height: 100px">
                                      <img src="/images/headCourier.jpg" style="float: left;">
                                      <div style="float: left;margin-left: 25px">
                                          <a style="font-size: 20px" id="kd">  西风小哥 </a><a>  ☆☆☆☆☆ </a><a>0</a><br>
                                        <a style="padding-top: 8px" >  联系电话  </a><a id="kd_phone">13544396321</a>
                                      </div>
                                      <div style="float: right">
                                          <a>预计上门时间</a><br>
                                          <a>明天</a><a style="font-size: 20px">09:00</a>
                                      </div>
                                  </div>

                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <!--小哥信息与简单包裹卡片e-->

              <form style="padding-top: 30px;padding-right: 50px;" class="layui-form" action="">
              
              
              
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <input type="hidden" id="p_id">
                  <button type="button" class="layui-btn layui-btn-warm back-5">取消订单</button>
                  <button type="button"  class="layui-btn layui-btn next-5">查看包裹</button>
                </div>
              </div>
            </form>

          </div>
        </div>
      </div>

</div>

<div th:include="/common/footer :: footer"></div>



<script src="/js/customer_send.js"></script>
</body>
</html>